<template>
	<view style="padding: 10px;height: 100%;">
		<view style="background-color: #fff;">
			<view style="">账号期限</view>
			
			<view style="margin: 10px;">
			
				<view style="display: flex;">
					<view style="flex: 2;">
						<view style="margin-top: 10px;">有效期</view>
						<view style="margin-top: 5px;font-size: 10px;"><text style="color: red;font-size: 20px;font-weight: bold;margin-right: 5px;">{{validity_day}}</text>天</view>
					</view>
					<view style="flex: 6;text-align: right;">
			
						<image @click="selectVipCounpon(item)" v-for="(item,index) in data_vip_counpon" :class="{card_active: sel_vip_id == item.id}" :src="item.cover[0]" style="width: 60px; height: 60px; margin-right: 20rpx;"></image>
						<!-- <image src="../../static/002.png" style="width: 60px; height: 60px; margin-right: 20rpx;"></image>
						<image src="../../static/003.png" style="width: 60px; height: 60px;"></image> -->
					</view>
				</view>
				
			</view>
			<view style="margin-top: 40px;">
				<!-- <radio style="font-size: 13px; margin-bottom: 5px;"> 自动续费（系统从您的账户中自动扣款）</radio> -->
				<button style="background-color: #000000; color: #FFFFFF; border-radius: 10px;">立即续费</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				validity_day: 0,
				data_vip_counpon: [],
				sel_vip_id: 0,
			}
		},
		onLoad() {
			let validity_day = uni.getStorageSync('validity_day', 0);
			this.validity_day = validity_day;
			this.getVipCounpon();
		},
		methods: {
			getVipCounpon() {
				let that = this;
				that.$api.getVipCounpon().then(res => {
					that.data_vip_counpon = res.data;
				})
			},
			selectVipCounpon(item) {
				if (this.sel_vip_id == item.id) {
					this.sel_vip_id = 0;
				} else {
					this.sel_vip_id = item.id;
				}
			}
		}
	}
</script>

<style>
	.card_active {
		border: 5px solid #18BC37;
		border-radius: 13px;
	}
</style>
